<div>

    <table class="fullwidth" ng-show="!isNew" style="margin-bottom:10px;">
        <tr>
            <td>
                <h3 class="resourcename euiTitle euiTitle--medium" id="opendistro_security.label.resource.resourcename">
                    {{resourcelabel}}: {{resourcename}}
                    <div class="kuiBadge kuiBadge--default" ng-if="resource.reserved">
                        <span class="euiBadge euiBadge--default">
                            <span class="euiBadge__content">
                                <span class="euiIcon euiIcon--small euiBadge__icon kuiIcon fa-lock"></span>
                                <span class="euiBadge__text" id="opendistro_security.label.resource.reserved">reserved</span>
                            </span>
                        </span>
                    </div>
                </h3>
            </td>
            <td class="actions">
                <button id="opendistro_security.button.resource.json.refresh" ng-if="showEditor" type="button" class="kuiButton kuiButton--secondary kuiButton--iconText" ng-click="loadJSON(resource)">
                    <span class="kuiButton__icon kuiIcon fa-refresh" ng-bind></span>
                    Refresh
                </button>
                <button id="opendistro_security.button.resource.json.toggle" type="button" class="kuiButton kuiButton--secondary kuiButton--iconText" ng-click="toggleEditor(resource)">
                    <span class="kuiButton__icon kuiIcon fa-code" ng-bind></span>
                    {{toggleEditorLabel}}
                </button>
            </td>
        </tr>
    </table>

    <div style="margin-bottom:10px;"
            id="object-form-json-raw"
            name="jsonRaw"
            ui-ace="{ onLoad: aceLoaded, mode: 'json' }"
            readonly
            ng-model="resourceAsJson"
            ng-if="showEditor"
            >
    </div>
</div>
